/**
 * Basic sample plugin inserting current date and time into CKEditor editing area.
 */

// Register the plugin with the editor.
// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.plugins.html
CKEDITOR.plugins.add('divlayer',
    {
        // The plugin initialization logic goes inside this method.
        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init
        init: function (editor) {
            // Define an editor command that inserts a timestamp. 
            // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCommand
            editor.addCommand('insertDivLayer',
                {
                    // Define a function that will be fired when the command is executed.
                    // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.commandDefinition.html#exec
                    exec: function (editor) {
                        // Insert the timestamp into the document.
                        // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertHtml
                        var selection = editor.getSelection().getStartElement();
                        if (!selection.is("img")) {
                            if (!(selection.is("div") &&
                                selection.hasClass("layer"))) {
                                alert('Please select image.');
                            } else {
                                editor.focus();
                                editor.fire('saveSnapshot');
                            }
                            return;
                        }

                        var width = selection.$.clientWidth + 'px';
                        var height = selection.$.clientHeight + 'px';
                        var top = selection.$.offsetTop + 'px';
                        var left = selection.$.offsetLeft + 'px';
                        var style = "style = 'padding:0px;position:absolute;height:" + height + ";width:" + width + ";top:" + top + ";left:" + left + "'";

                        // Move cursor to end
                        var range = editor.createRange();
                        range.moveToPosition(range.root, CKEDITOR.POSITION_BEFORE_END);
                        editor.getSelection().selectRanges([range]);

                        editor.insertHtml("<div class='layer' " + style + " _moz_resizing='false'>Here is a floating layer</div>");
                    }
                });

            editor.addCommand('removeDivLayer',
                {
                    exec: function (editor) {
                        var selection = editor.getSelection().getStartElement();
                        if (!selection.is("img")) {
                            if (selection.is("div") &&
                                selection.hasClass("layer")) {
                                CKEDITOR.dom.element.get(selection).setHtml('');
                                CKEDITOR.dom.element.get(selection).remove(true);
                            }
                            return;
                        }
                    }
                });
            // Create a toolbar button that executes the plugin command. 
            // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton
            editor.ui.addButton('AddLayer',
                {
                    // Toolbar button tooltip.
                    label: 'Insert layer top of image',
                    // Reference to the plugin command name.
                    command: 'insertDivLayer',
                    // Button's icon file path.
                    icon: this.path + 'images/add.png'
                });

            editor.ui.addButton('RemoveLayer',
                {
                    // Toolbar button tooltip.
                    label: 'Remove layer',
                    // Reference to the plugin command name.
                    command: 'removeDivLayer',
                    // Button's icon file path.
                    icon: this.path + 'images/remove.png'
                });
        }
    });